<!-- 主入口 -->
<template>
	<a-layout id="components-layout-demo-top" class="layout">
		<a-layout-header>
			<div class="logo" />
			<a-menu theme="dark" mode="horizontal" :default-selected-keys="defaultKey" :style="{ lineHeight: '64px' }">
				<a-menu-item v-for="item in routerList" :key='item.name' @click='onJump(item)'>
					{{item.meta.title}}
				</a-menu-item>
			</a-menu>
		</a-layout-header>
		<a-layout-content class='content'>
				<router-view/>
		</a-layout-content>
	</a-layout>
</template>
<script>
	import routerList from '../util/routerList.js'
	export default {
		name: 'mainView',
		data() {
			return {
				msg: '主入口',
				routerList,
				defaultKey:[]
			}
		},
		created() {
			this.getDefaultKey()
		},
		methods:{
			onJump(item){
				console.log(item);
				this.$router.push({
					name:item.name
				})
			},
			getDefaultKey(){
				let name = this.$route.name
				for (let i = 0; i < routerList.length; i++) {
					let item = routerList[i]
					if(item.name == name){
						this.defaultKey = [name]
						break
					}
				}
			}
		}
	}
</script>
<style scoped>
	.content{
		height: calc( 100vh - 133px);
	}
</style>
